<!--
 * @Author: yangzhiyu yangzhiyu@mail.pigcms.com
 * @Date: 2024-03-23 15:19:27
 * @LastEditors: yangzhiyu yangzhiyu@mail.pigcms.com
 * @LastEditTime: 2024-03-23 18:01:15
 * @FilePath: \fe_user_pc\src\views\shotstack\MuseMixedCut\components\DownloadProgress.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 最大高度 360 内容宽度 317
-->
<script setup>
    // icon
    import { 
        DownOutlined,
        UpOutlined,
        CloseOutlined
    } from '@ant-design/icons-vue';
import { onMounted, reactive, ref } from 'vue';

onMounted(() => {
    // 组件挂载后的初始化代码
});

const position = reactive({
  translateX: 0, // 初始X轴位移
  translateY: 0, // 初始Y轴位移
});
const dragStart = (event) => {
  event.preventDefault();
  const startPosition = { x: event.clientX, y: event.clientY };

  const moveElement = (moveEvent) => {
    const dx = moveEvent.clientX - startPosition.x;
    const dy = moveEvent.clientY - startPosition.y;

    // 更新translate值
    position.translateX += dx;
    position.translateY += dy;

    // 更新起始位置，以便下次移动可以基于新位置计算
    startPosition.x = moveEvent.clientX;
    startPosition.y = moveEvent.clientY;
  };

  const stopDrag = () => {
    document.removeEventListener('mousemove', moveElement);
    document.removeEventListener('mouseup', stopDrag);
  };

  document.addEventListener('mousemove', moveElement);
  document.addEventListener('mouseup', stopDrag);
};

</script>

<template>
    <div class="DownloadProgress"
    @mousedown="dragStart"
    style="cursor: grab;"
    :style="`transform: translate3d(${position.translateX}px, ${position.translateY}px, 0px)`"
    >
        <div class="DownloadProgress_header">
            <h3 class="title"> 添加进度 </h3>
            <div class="controls">
                <DownOutlined v-if="true"/>
                <UpOutlined v-else/>
                <CloseOutlined style="margin-left: 10px;"/>
            </div>
        </div>

        <div class="DownloadProgress_content">
            <div>上传任务</div>
            <ul class="list_content">
                <li class="item" v-for="item in 6" :key="item">
                    <div class="left_content">
                        <div class="img_box">
                            <img src="" alt="">
                        </div>
                        <div class="item_status_box">
                            <span class="item_name">下载 - Trim.mp4</span>
                            <span class="item_states">上传成功</span>
                        </div>
                    </div>
                        <span>查看</span>
                </li>

            </ul>
        </div>
    </div>
</template>



<style lang="less" scoped>

ul, li {
    margin: 0;   /* 移除外边距 */
    padding: 0;  /* 移除内边距 */
    list-style: none; /* 移除列表项目符号 */
}
    .DownloadProgress{
        box-shadow: 0 4px 14px rgba(0,0,0,.1);
        background-color: #fff;
        padding: 20px 24px;
        width: 357px;
        position: fixed;
        top: 400px;
        right: 20px;
        flex-flow: column;
        white-space:break-spaces; 
        z-index: 999;
        .DownloadProgress_content{
            .list_content{
                display: flex;
                flex-direction: column;
                .item{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 8px 0;
                    .left_content{
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        .item_status_box{
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                        }
                    }
                }
            }
        }
        .DownloadProgress_header{
            display: flex;
            justify-content: space-between;
            .controls{
                color: #787a7c;
            }
        }
    }
</style>